<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { EvaluationItemData, RequestPath, startRequest } from '../base/RequestWork';
import { ElMessage } from 'element-plus';
// 评价数据
let tableData = ref<EvaluationItemData[]>([])
// 筛选
let filter = ref(0)
// 分页字段
let limit = 4
let hasMore = ref(true)
// 组件挂载时加载数据
onMounted(()=>{
    reLoadData()
})
// 切换了筛选项时，此方法重新加载数据
function reLoadData() {
    tableData.value = []
    loadData()
}
// 加载数据，进行请求
function loadData() {
    let params:any = {
        limit,
        offset: tableData.value.length,
        filter: filter.value
    }
    startRequest(RequestPath.evaluationListGet, 'get', params).then((response)=>{
        hasMore.value = (response.data.datas ?? []).length >= limit
        // 对属性进行赋值
        tableData.value.push(...(response.data.datas as []));
    }).catch((error)=>{
        ElMessage.error({
            message: error.response.data.error
        })
    })
}
// 更新某个评价的审核状态
function update(index: number) {
    let params = {
        eid: tableData.value[index].id,
        state: tableData.value[index].state == 0 ? 1 : 0
    }
    startRequest(RequestPath.evaluationUpdate, 'get', params).then(()=>{
        tableData.value[index].state = params.state
    }).catch((error)=>{
        ElMessage.error({
            message: error.response.data.error
        })
    })
}
</script>

<template>
    <!-- 筛选组件 -->
    <el-select v-model.number="filter" placeholder="筛选评价类型" size="large"
        style="width: 100px;margin: 20px; " @change="reLoadData">
        <el-option v-for="item in [0, 1]" :key="item" :label="item == 0 ? '未审核':'审核通过'" :value="item"/>
    </el-select>
    <!-- 评价列表 -->
    <div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="评价编号" width="80" />
            <el-table-column prop="user.username" label="发布者" width="80" />
            <el-table-column prop="user.id" label="发布者id" width="80" />
            <el-table-column prop="gid" label="商品id" width="80" />
            <el-table-column prop="star" label="分数" width="100" />
            <el-table-column prop="content" label="内容" width="100" />
            <el-table-column prop="created_at" label="发布时间" width="200" />
            <el-table-column label="操作"  width="180">
                <template #default="scope">
                    <el-button :type="scope.row.state == 0 ? 'primary' : 'danger'" @click="update(scope.$index)">{{ scope.row.state == 0 ? '审核通过' : '恢复未审核' }}</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- 加载更多 -->
    <div v-show="hasMore" style="width: 100%; text-align: center; margin-top: 15px; color: grey;" @click="loadData">点击加载更多</div>
</template>